/**
 * Tabs组件
 *
 * @class Tabs
 * @extends Basic
 *
 * @param [disabled] 是否禁用
 * @param [defaultActiveKey] 默认打开第几个tab
 *
 * 示例:
 *
 *     @example
 *
 *     var callback = function(){
 *          console.log(123);
 *     }
 *      var TabItem = Tabs.TabItem;
 *     <Tabs defaultActiveKey="0" onclick={callback}>
 *          <TabItem tab="Tab 1">Content of Tab Pane 1</TabItem>
 *          <TabItem tab="Tab 2">Content of Tab Pane 2</TabItem>
 *          <TabItem tab="Tab 3">Content of Tab Pane 3</TabItem>
 *          <TabItem tab="Tab 4">Content of Tab Pane 4</TabItem>
 *      </Tabs>
 */
var TabItem=React.createClass({
    render:function(){
        return (this.props.children);
    }
});

var Tabs=React.createClass({
    getDefaultProps:function(){
        return {
            disabled:false,
            defaultActiveKey:0
        }
    },
    getInitialState:function(){
        return {
            currentIndex : this.props.defaultActiveKey
        };
    },
    checkTitleIndex:function(index){
        if(this.state.currentIndex==-1){
            return "";
        }else{
            return index==this.state.currentIndex ? "ucs-tabs-active" : "";
        }
    },
    checkContentIndex:function(index){
        if(this.state.currentIndex==-1){
            return "none";
        }else{
            return index==this.state.currentIndex ? "block" : "none";
        }
    },
    _handleClick:function(index,disabled,e){
        var source = e.target || e.srcElement;
        if(!disabled){
            var disabled=disabled?'disabled':'';
            for(var i = 0; i < source.parentNode.childNodes.length; i++){
                source.parentNode.childNodes[i].className = "";
                this.refs['ucs-tabs-content'].childNodes[i].style.display = "none";
            }
            this.setState({
                currentIndex: index
            });
            source.className = disabled+" "+this.checkTitleIndex(index);
            this.refs['ucs-tabs-content'].childNodes[index].style.display = "block";
        }
        this.props.callback ? this.props.callback(this.state.currentIndex):"";
    },
    render:function(){
        var _this=this;
        return(
            <div className="ucs-tabs">
                <div className="ucs-tabs-bar">
                    <ul>
                        {
                            _this.props.children.map(function(element,index){
                                var disabled=element.props.disabled?'disabled':'';
                                return(
                                    <li onClick={_this._handleClick.bind(_this,index,element.props.disabled)}  className={disabled+" "+_this.checkTitleIndex(index)}>
                                        { element.props.tab }
                                    </li>
                                );
                            })
                        }
                    </ul>
                </div>
                <div className="ucs-tabs-content" ref="ucs-tabs-content">
                    {
                        _this.props.children.map(function(element,index){
                            return(
                                <div className="ucs-tabs-tabpane" style={{display: _this.checkContentIndex(index)}}>
                                    {element.props.children}
                                </div>
                            );
                        })
                    }
                </div>
            </div>
        );
    }
});

Tabs.TabItem=TabItem;
module.exports = Tabs;